<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Ring and Disk</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="420"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Helper function to draw an arrow
    function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        // Line
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        // Head
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // Parameters
    const cx = 250;
    const cy = 190;
    const R_val = 60; // Represents R
    const outerR = 2 * R_val;
    const innerR = R_val;
    
    // Draw ground
    const groundY = cy + outerR;
    ctx.beginPath();
    ctx.moveTo(30, groundY);
    ctx.lineTo(520, groundY);
    ctx.stroke();

    // Draw hatches for the ground
    const hatchLength = 15;
    const hatchSpacing = 20;
    for (let x = 40; x < 520; x += hatchSpacing) {
        ctx.beginPath();
        ctx.moveTo(x, groundY);
        ctx.lineTo(x - hatchLength, groundY + hatchLength);
        ctx.stroke();
    }

    // Draw the annulus (outer and inner circles)
    ctx.beginPath();
    ctx.arc(cx, cy, outerR, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(cx, cy, innerR, 0, 2 * Math.PI);
    ctx.stroke();
    
    ctx.font = '24px "Times New Roman"';

    // Draw radius 2R
    const angle2R = 140 * Math.PI / 180; // Angle in radians
    const endX2R = cx + outerR * Math.cos(angle2R);
    const endY2R = cy - outerR * Math.sin(angle2R);
    drawArrow(cx, cy, endX2R, endY2R, 12);
    ctx.fillText('2R', cx + 75 * Math.cos(angle2R), cy - 75 * Math.sin(angle2R));

    // Draw radius R
    const angleR = 40 * Math.PI / 180; // Angle in radians
    const endXR = cx + innerR * Math.cos(angleR);
    const endYR = cy - innerR * Math.sin(angleR);
    drawArrow(cx, cy, endXR, endYR, 12);
    ctx.fillText('R', cx + 45 * Math.cos(angleR) + 10, cy - 45 * Math.sin(angleR));
    
    // Draw initial velocity vector v0
    const v0_y = cy;
    const v0_startX = cx + outerR + 30;
    const v0_endX = v0_startX + 70;
    drawArrow(v0_startX, v0_y, v0_endX, v0_y, 12);
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillText('v', v0_startX + 35, v0_y - 20);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.textBaseline = 'bottom';
    ctx.fillText('0', v0_startX + 35 + 10, v0_y - 15);
    ctx.textBaseline = 'middle'; // Reset baseline

    // Add labels in Chinese
    ctx.font = '28px "STSong", "SimSun"'; // Use a common Chinese font
    ctx.fillText('小圆盘', cx, cy + 15);
    ctx.fillText('圆环', cx, cy + innerR + 30);

</script>
</body>
</html>